<template>
    <div class="packingList">
        <span class="_before">开提箱单</span>
        <div class="orderInfo">
            <p>售箱订单:</p>
            <ul>
                <li><span>订单号</span><span>预计提箱日期</span><span>下单日期</span></li>
                <li>
                    <span>{{rowData.orderNo}}</span>
                    <span>{{param.planPickupDate}}</span>
                    <span>{{param.createTime}}</span></li>
            </ul>
        </div>
        <div class="packingInfo orderInfo">
            <p>箱型/箱框/箱量:</p>
            <ul>
                <li><span>箱型</span><span>箱框</span><span>箱量</span></li>
                <li><span>{{ param.boxType}}</span><span>{{ param.boxCondition}}</span><span>{{ rowData.boxQuantity?rowData.boxQuantity:0}}</span></li>
            </ul>
        </div>
        <div class="attachment">
            <p><redStar/>提箱单有效范围:</p>
            <el-date-picker v-model="param.periodValidity" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"/>
        </div>
        <div class="attachment">
            <p>提箱单附件:</p>
            <img-upload ref="packingRef" />
        </div>
        <div class="remark">
            <p>备注</p>
            <el-input v-model="param.remark" type="textarea" placeholder="请输入内容" />
        </div>
        <div style="margin:40px 0 0 15%;height: 50px;text-align: center;">
            <el-button @click="handleSubmit" type="primary" style="width: 100px;">提交</el-button>
        </div>
    </div>
</template>
<script setup lang="ts">
    import { ref, reactive, onMounted, watch, computed, onActivated } from 'vue'
    import imgUpload from '@/components/upload/index.vue'
    import { addPackingBoxSell } from '@/api/boxDeal/tiXiangManage'
    import { ElMessage, ElMessageBox } from 'element-plus'
    import redStar from '@/views/components/redStar.vue';
    import { useRouter } from 'vue-router';

    const emit = defineEmits(['update:selection'])
    const router = useRouter();
    const packingRef = ref()
    const props = defineProps({
        selection: {
            type: Array,
            default: () => []
        },
        opr: {
            type: String,
            default: ''
        },
        rowData: {
            type: Object,
            default: () => { }
        },
        pageName: {
            type: String,
            default: 'boxDeal' // boxDeal- 箱贸易 rent- 出租
        },
    })
    onMounted(() => {
        console.log(111,props.rowData)
        setBoxMsg(props.rowData.boxType,props.rowData.boxCondition)
    })
    const param = reactive({
        boxType:'--',
        boxCondition:'--',
        orderList:props.selection,
        packingId:'',
        remark:'',
        periodValidity:''
    })

    const setBoxMsg = () => {
        const boxData = props.rowData
        // 箱型列表
        const boxTypeList = [{ value: 5, label: '40HQ' }, { value: 10, label: '40GP' }, { value: 15, label: '20HQ' }, { value: 20, label: '20GP' }]
        // 箱况列表
        const boxConditionList = [{ value: 15, label: '适货' }, { value: 10, label: '次新' }, { value: 20, label: '混提' },{ value: 5, label: '全新' }]
        boxTypeList.forEach(item => {
            if(item.value == boxData.boxType){
                param.boxType = item.label
            }
        })
        boxConditionList.forEach(item => {
            if(item.value == boxData.boxCondition){
                param.boxCondition = item.label
            }
        })
        if(boxData.planPickupDate){
            param.planPickupDate = boxData.planPickupDate.toString().substring(0,10)
        }
        if(boxData.createTime){
            param.createTime = boxData.createTime.toString().substring(0,10)
        }
    }
    const handleSubmit = async () =>{
        if(!param.periodValidity) return ElMessage.error('请选择提箱有效期')
        const orderList = [{
            orderId: props.rowData.id,
            orderNo: props.rowData.orderNo,
            planPickupDate: props.rowData.planPickupDate,
            createTime: props.rowData.createTime
        }]
        const imgList = await packingRef.value.resultList || []
        const data = {
            "boxType": {"40HQ":5,"40GP":10,"20HQ":15,"20GP":20}[param.boxType],
            "boxCondition":{"全新":5,"次新":10,"适货":15,"混提":20}[param.boxCondition],
            "orderList": JSON.stringify(orderList), 
            "packingFileList": JSON.stringify(imgList) || null,
            "remark": param.remark,
            "packingValidityPeriodStart":param.periodValidity[0],
            "packingValidityPeriodEnd":param.periodValidity[1]
        }
        
        addPackingBoxSell(data).then((res: any) => {
            ElMessage.success('提交成功')
        //    console.log(res)
            router.push('sellOrder')
            param.isPackingList = false
        })
    }
</script>
<style scoped>
    ul{
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: center;
    }
    .packingList > div{
        margin-left: 15%;
        width: 70%;
    }
    .packingList ul{
        border: 1px solid #dad8d6;
    }
    .packingList > div li:first-child{
        background-color: azure;
        border-bottom: 1px solid #dad8d6;
    }
    .packingList > div li span{
        display: inline-block;
        width: 33%;
        padding: 10px 0;
        border-right: 1px solid #dad8d6;
        text-align: center;
    }
    .packingList > div li span:last-child{
        border-right: none
    }
</style>